<template>
    <new-search-panel :showAdvanced="false" @search="onSearch" @reset="onReset">
        <template #default>
            <a-col :md="24" :sm="24">
                <a-form-item label="类型名称：">
                    <a-input :maxLength="35" v-model:value="queryParam.name" allow-clear placeholder="请输入类型名称" />
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="唯一编号：">
                    <a-input :maxLength="35" v-model:value="queryParam.code" allow-clear placeholder="请输入唯一编号" />
                </a-form-item>
            </a-col>
        </template>
        <template #advanced>
            <!-- 这里放置扩展查询项 -->
        </template>
        <template #button>
            <a-button type="primary" @click="addType()">
                <template #icon><PlusOutlined /></template>
                新增类型</a-button
            >
        </template>
    </new-search-panel>
    <dynamic-table
        :tableType="1"
        ref="tableRef"
        :columns="columns"
        :get-list-func="sysDictTypePage"
        :queryParam="queryParam"
        :rowKey="(record) => record.id"
        :scrollX="1000" 
        :fixed="true"
    >
        <!-- <template #title>
            <a-button type="primary" @click="addItem"> 新增字典 </a-button>
            <a-button :disabled="isDisabled" type="primary" @click="dictDelete(record)"> 删除 </a-button>
        </template> -->
        <template #status="{ record }">
            {{ record.status == 0 ? '正常' : '停用' }}
        </template>
        <template #action="{ record }">
            <a @click="dictSkip(record.id)">字典</a>
            <a-divider type="vertical" />
            <a-dropdown>
                <a class="ant-dropdown-link"> 更多 <DownOutlined /> </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <a @click="editType(record)">编辑</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a-popconfirm placement="topRight" title="确认删除吗？" @confirm="dictTypeDelete(record)">
                                <a>删除</a>
                            </a-popconfirm>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </template>
    </dynamic-table>
    <dictDataForm ref="dictDataFormRef"></dictDataForm>
</template>
<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, createVNode, computed, ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { DynamicTable, newSearchPanel } from '@/components'
import { sysDictTypeDelete, sysDictTypePage, sysDictTypeEdit, sysDictTypeAdd } from '@/api/system/dict'
import { getFormSchema } from './form-schema'
import { columns } from './columns'
import { hasPermission } from '@/utils/permission/hasPermission'
import dictDataForm from './components/dictDataForm.vue'
import { useFormModal } from '@/hooks/useFormModal'

export default defineComponent({
    name: 'SystemDict',
    components: {
        DynamicTable,
        newSearchPanel,
        dictDataForm
    },
    setup() {
        const tableRef = ref<any>(null)
        const dictDataFormRef = ref<any>(null)
        const state = reactive({
            tableLoading: false,
            /** 查询 */
            queryParam: {
                name: '',
                code: ''
            },
            typeId: '',
            rowselection: false
            /** 多选 */
            // rowSelection: {
            //     onChange: (selectedRowKeys, selectedRows) => {
            //         state.rowSelection.selectedRowKeys = selectedRowKeys
            //     },
            //     selectedRowKeys: []
            // }
        })

        /* 删除多项 **/
        // const deleteItems = () => {
        //     Modal.confirm({
        //         title: '提示',
        //         icon: createVNode(QuestionCircleOutlined),
        //         content: '您确定要删除所有选中吗？',
        //         onOk: async () => {
        //             await sysDictTypeDelete(state.rowSelection.selectedRowKeys.toString())
        //             tableRef.value.refreshTableData()
        //             state.rowSelection.selectedRowKeys = []
        //         }
        //     })
        // }

        /**
         * 删除
         * @param record
         */
        function dictTypeDelete(record) {
            sysDictTypeDelete(record).then(() => {
                message.success('删除成功')
                tableRef.value.refreshTableData()
            })
        }
        /**
         * 查询
         */
        function onSearch() {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }
        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                name: '',
                code: ''
            }
            onSearch()
        }
        /* 添加字典类型 **/
        const addType = () => {
            useFormModal({
                title: '新增字典类型',
                formSchema: getFormSchema(),
                handleOk: async (modelRef, state) => {
                    await sysDictTypeAdd(modelRef)
                    message.success('新增成功')
                    tableRef.value.refreshTableData()
                }
            })
        }
        /* 编辑字典类型 **/
        const editType = (record) => {
            useFormModal({
                title: '编辑字典类型',
                formSchema: getFormSchema(),
                fields: record,
                handleOk: async (modelRef, state) => {
                    await sysDictTypeEdit(modelRef)
                    message.success('编辑成功')
                    tableRef.value.refreshTableData()
                }
            })
        }
        /**
         * 打开详情
         */
        function dictSkip(id) {
            dictDataFormRef.value.visible = true
            dictDataFormRef.value.queryParam.typeId = id
            dictDataFormRef.value.onReset()
        }
        // const isDisabled = computed(() => state.rowSelection.selectedRowKeys.length == 0)

        return {
            ...toRefs(state),
            columns,
            tableRef,
            sysDictTypePage,
            onReset,
            onSearch,
            addType,
            editType,
            dictTypeDelete,
            dictDataFormRef,
            dictSkip
        }
    }
})
</script>
